<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<!--仅用于放片段-->

<!--
    th:fragment : thymeleaf 中的片段，定义后可以到处引用，里面的属性可以传参
-->
<!--头部-->
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <!--调整缩放，方便移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>

    <!--semantic ui 的 css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    <!--自己定义的 css-->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <!--editormd 的 css-->
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">

</head>

<!--导航栏-->
<nav th:fragment="menu(n)" class="ui inverted segment attached m-padded-tb-mini m-shadow-small">
    <!--放在 container 里可以让四周都留点空隙-->
    <div class="ui container">
        <!--
            secondary : 相当于一个背景色的样式
            stackable : 表示可堆叠的，在移动端时，里面的元素会有序堆在一起，一般与 menu ，grid 等连用
        -->
        <div class="ui inverted secondary stackable menu">
            <!--teal : 相当于一个字体颜色，绿色-->
            <h2 class="ui teal header item">管理后台</h2>
            <!--在 ws 中可以快速写标签，例如： i.home.icon + tab键 = <i class="home icon"></i>-->
            <!--
                item : 与上面的 menu 相对应
                m-mobile-hide : 自定义的 css ，在移动端时隐藏
                m-item : 没有任何样式作用，仅用于 js 作为选择器
            -->
            <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>博客</a>
            <a href="#" th:href="@{/admin/types}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>

            <div class="right m-item item m-mobile-hide menu">
                <!--拥有下拉菜单的头像框-->
                <!--
                    dropdown item : 代表一个下拉菜单
                -->
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui avatar image" src="https://picsum.photos/id/1/100/100" th:src="@{${session.user.avatar}}">
                        <span th:text="${session.user.nickname}"></span>
                    </div>
                    <i class="dropdown icon"></i>
                    <!--menu 中包含下拉菜单项-->
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--用于移动端折叠导航栏的按钮-->
    <!--
        m-right-top : 自定义的 css，将元素至于右上角
        m-mobile-show : 自定义的 css ，在移动端时显示，在通常情况下隐藏
        menu toggle : 没有任何样式作用，仅用于 js 作为选择器
    -->
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>

<!--页脚-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
    <!--
        center aligned : 里面所有元素居中
    -->
    <div class="ui center aligned container">
        <!--
            grid : 类似于 bootstrap 中的 row，bootstrap 中 把一行分成 12 列，这里分成 16 列
            divided : 每列之间加上分割线
            inverted : 因为背景是反转色，所以这里也反转
        -->
        <div class="ui inverted divided stackable grid">
            <!--二维码图片-->
            <!--
                wide : 宽度填满
            -->
            <div class="three wide column">
                <!--把图片放在 list 里，使图片能居中-->
                <div class="ui inverted link list">
                    <div class="item">
                        <!--
                            rounded : 圆角的
                        -->
                        <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>
            <!---->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <!--
                    list : 里面的元素呈列表样式
                -->
                <div class="ui inverted link list">
                    <!--
                        item : 与上面的 list 相对应
                    -->
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <!--
                    list : 里面的元素呈列表样式
                -->
                <div class="ui inverted link list">
                    <!--
                        item : 与上面的 list 相对应
                    -->
                    <a href="#" class="item">Email: dfasdog@qq.com</a>
                    <a href="#" class="item">QQ: 13355767653</a>
                </div>
            </div>
            <div class="seven wide column">
                <!--加上自定义样式-->
                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                <!--加上自定义样式-->
                <p class="m-text-thin m-text-spaced m-opacity-mini">一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话</p>
            </div>
        </div>
        <!--分割线-->
        <!--
            divider : 与上面的 divided 区别开
        -->
        <div class="ui inverted section divider"></div>
        <!--加上自定义样式-->
        <p class="m-text-thin m-text-spaced m-opacity-tiny">版权内容版权内容版权内容版权内容版权内容</p>
    </div>
</footer>

<!--js 的引用-->
<th:block th:fragment="script">
    <!--jquery 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <!--semantic ui 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <!--editormd 的 js-->
    <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
</th:block>

<body>

</body>
</html>